.windows-wrapper {
  position: ralative;
  width: 100%;
  height: 100%;
  color: #fff;

  img {
    object-fit: cover;
  }

  .windows-date-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    transform: translateY(0);
    transition: all 0.1s;

    &.hide {
      transform: translateY(-100%);
    }
  }

  .windows-date-content {
    position: absolute;
    bottom: 80px;
    left: 80px;
    opacity: 1;
    visibility: visible;
    transition: all 0.2s ease;

    &.hide {
      opacity: 0;
      visibility: hidden;
    }
  }

  .windows-unlock-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;

    &.show {
      opacity: 1;
      visibility: visible;
    }

    :global(.ant-input-outlined) {
      &:hover,
      &:focus-within {
        border-color: var(--ant-color-border);
      }
    }

    .input {
      border-radius: 0;
      height: 24px;
      padding: 0;
      padding-left: 4px;
      font-size: 12px;
      width: 170px;
      align-items: center;

      &:focus {
        border-color: var(--ant-color-border);
      }

      :global(.ant-input-suffix) {
        height: 22px;
      }

      :global(.ant-input) {
        &::input-placeholder {
          font-size: 12px;
        }
      }
    }
  }
}
